<template>
	<view style="padding: 20rpx 20rpx 20rpx 20rpx;">
		<view style="text-align: center;margin-top: 500rpx;" v-if="!hiStoryList">
			<view style="font-size: 30rpx;">空空如也</view>
			<view style="font-size: 25rpx;color: #C8C7CC;margin-top: 10rpx;">这里会显示您最近浏览过的书籍</view>
		</view>
		<view  v-if="hiStoryList" style="padding: 15rpx 15rpx 15rpx 15rpx;">
			<view @tap="clearHiStoryList()" style="height: 100rpx;line-height: 100rpx;margin-left: 91%;color: #007AFF;">清空</view>
			<view v-for="(item,index) in hiStoryList" style="height: 120rpx;">
				<view @tap="toDetail(item.bid)">
					<view style="font-size: 30rpx;">{{item.name}}</view>
					<view style="font-size: 25rpx;color: #C8C7CC;margin-top: 10rpx;">{{item.datetime}}</view>
				</view>
				<view class="line"></view>
			</view>
			<view style="text-align: center;color: #C8C7CC;">
				已加载全部
			</view>
		</view>
	</view>
</template>

<script>
	import {setStore, getStore} from "../../store/store.js"
	export default {
		data() {
			return {
				hiStoryList: getStore("readHistory")
			}
		},
		onLoad() {
		},
		methods: {
			clearHiStoryList(){
				uni.removeStorageSync("readHistory")
				this.hiStoryList = {}
			},
			toDetail(bid){
				uni.navigateTo({
					url: "../detail/detail?bookid="+bid 
				})
			}
		}
	}
</script>

<style>
	.line{
	    bottom: 0;
	    height: 1px;
		margin-top: 20rpx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
		opacity: 0.6;
	}
</style>
